<template>
	<view class="">
		<view v-if="isTag">
			<u-tag plain plainFill :type="item.listClass ? colorType[item.listClass] : '' " v-for="(item,index) in textList" :text="item[keyName]"></u-tag>
		</view>
		<view v-else>
			<u--text style="text-align: right;" :type="item.listClass ? colorType[item.listClass] : '' " v-for="(item,index) in textList" :text="item[keyName]"></u--text>
		</view>
	</view>
</template>

<script>
	import dicts from '@/mixins/dicts.js'

	export default {
		mixins: [dicts],
		props: {
			isTag: {
				type: Boolean,
				default: false,
			},
			isDict: {
				type: Boolean,
				default: true,
			},
			dictType: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => []
			},
			value: {
				type: String,
				default: ''
			},
			keyName: {
				type: String,
				default: 'dictLabel'
			},
			keyValue: {
				type: String,
				default: 'dictValue'
			}
		},
		data() {
			return {
				textList: '',
				colorType: {
					default: '',
					primary: 'primary',
					success: 'success',
					info: 'info',
					warning: 'warning',
					danger: 'error',
				}
			}
		},
		created() {
			// if (this.isDict) {
			// 	this.getDictsList(this.dictType)
			// }
			this.calculateDisplayText()
		},
		watch: {
			value: 'calculateDisplayText',
			list: 'calculateDisplayText',
			dicts: {
				handler: 'calculateDisplayText',
				deep: true
			}
		},
		methods: {
			findCustomizeDictionary(list, value, keyName, keyValue) {
				if (!value || !list || !Array.isArray(list) || list.length === 0) {
					return value;
				}

				const valueSet = new Set(value.split(','));
				const result = [];

				for (const item of list) {
					if (valueSet.has(item[keyValue])) {
						result.push(item);
					}
				}
				// return result.length > 0 ? result.join(',') : value;
				return result || '';
			},
			calculateDisplayText() {
				const sourceList = this.list;
				this.textList = this.findCustomizeDictionary(
					sourceList,
					this.value,
					this.keyName,
					this.keyValue
				);
			}
		}
	}
</script>

<style>
</style>